<template>
	<view class="container">
		<navbar title="售后详情"></navbar>
		<view class="wrap">
			<view class="after-sale-wrap">
				<view class="right-icon">
					<image src='../static/cha.png'></image>
				</view>
				<template v-if='refundDetail.audit_status == 0'>
					<view class="top-title">
						{{refundDetail.state_text}}
					</view>
					<view class="pending-wrap">
						<view class="refund-info-wrap">
							<view class="title-wrap">
								<view class="title">退款信息</view>
							</view>
							<view class="goods">
								<apply-goods-item :item='refundDetail.orderGoods'></apply-goods-item>
							</view>
							<!-- <view class="order">
								<view class="title-wrap">
									<view class="title">订单编号</view>
									<view class="time">3800628003834166923 </view>
								</view>
							</view> -->
						</view>
						<view class="refund-reason-wrap">
							<view class="title-wrap">
								<view class="title">退款原因</view>
								<view class="time">{{item.create_time}}</view>
							</view>
							<scroll-view class="reason-con" scroll-y scroll-with-animation="true">
								<view class="text">
									{{refundDetail.apply_desc}}</view>
							</scroll-view>
							<view class="reason-list" v-if='refundDetail.images.length > 0'>
								<view class="reason-img" v-for="(item,index) in refundDetail.images" :key="index">
									<base-img :src='item'></base-img>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-if='refundDetail.audit_status == 10 || refundDetail.audit_status == 20'>
					<view class="top-title top-title2">
						{{refundDetail.state_text}}
					</view>
					<view class="pending-wrap">
						<view class="refund-money-wrap" v-if='refundDetail.is_receipt == 1'>
							<view class="left-wrap">
								<view class="title">退款金额</view>
								<view class="title-2">申通通过后退回至原账户</view>
							</view>
							<view class="right-wrap">
								<text>￥</text>{{refundDetail.refund_money}}
							</view>
						</view>
						<view class="address-wrap" v-if='refundDetail.OrderRefundAddress'>
							<view class="title-wrap">
								<view class="title">商家收货地址</view>
							</view>
							<view class="address-con">
								<view class="user-info-wrap">
									{{refundDetail.OrderRefundAddress.name}}<text class="ml">{{refundDetail.OrderRefundAddress.phone}}</text>
								</view>
								<view class="address">{{refundDetail.OrderRefundAddress.address_detail}}</view>
							</view>
						</view>
						<view class="delivery-wrap" v-if='refundDetail.is_user_send == 1'>
							<view class="title-wrap">
								<view class="title">我已寄出</view>
							</view>
							<view class="wuliu-info">
								<view class="wuliu-info-left">
									{{refundDetail.express_no}}<text>{{refundDetail.express.name}}</text>
								</view>
								<view class="copy" @tap='copy(refundDetail.express_no)'>复制</view>
							</view>
						</view>
						<view class="refund-info-wrap refund-info-wrap2">
							<view class="title-wrap">
								<view class="title">退款信息</view>
							</view>
							<view class="goods">
								<apply-goods-item :item='refundDetail.orderGoods'></apply-goods-item>
							</view>
							<view class="order">
								<view class="title-wrap">
									<view class="title">申请时间：{{refundDetail.create_time}}</view>
								</view>
							</view>
						</view>
						<view class="refund-reason-wrap refund-reason-wrap2">
							<view class="title-wrap2">
								<view class="title">退款原因：</view>
								<view class="reason">
									{{refundDetail.apply_desc}}
								</view>
							</view>
							<view class="reason-list" v-if='refundDetail.images.length > 0'>
								<view class="reason-img" v-for="(item,index) in refundDetail.images" :key="index">
									<base-img :src='item'></base-img>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
		<view class="footer" v-if='refundDetail.audit_status == 10 && refundDetail.is_user_send == 0'>
			<view class="footer-btn" >
				<button class="btn line-center" hover-class="none" @tap='returnGoodsModal'>寄回商品</button>
			</view>
		</view>
		<view class="footer" v-else>
			<view class="footer-btn">
				<button class="btn-short conact line-center" @tap="concat" hover-class="none">联系客服</button>
				<button class="btn-short cancel line-center" hover-class="none" v-if='refundDetail.status == 0 && refundDetail.is_user_send == 0' @tap='cancelRefund'>取消退款</button>
			</view>
		</view>
		<view class="modal" :class="[showModal ? 'modal-show':'']">
			<view class="wuliu-wrap" v-if='showModal'>
				<image src='../static/wuliu-bg.png'></image>
				<view class="wuliu-con">
					<view class="title">上传单号</view>
					<view class="form">
						<view class="form-item">
							<input type='text' placeholder="请填写物流单号" v-model="returnForm.expressNo"/>
						</view>
						<!-- <view class="form-item">
							<sky-search-select v-model="returnForm.expressId" :localdata="range"
								@change="bindPickerChange"></sky-search-select>
						</view> -->
					</view>
					<button class="btn line-center" @tap='returnGoods' :disabled="isDisabled" :loading="isDisabled">{{btnText}}</button>
				</view>
				<view class="close" @tap='close'>
					<uni-icons type="close" color="#DEDBDB" size="30"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import applyGoodsItem from '../components/apply-goods-item.vue';
	export default {
		components: {
			applyGoodsItem
		},
		data() {
			return {
				showModal:false,
				orderRefundId:'',
				refundDetail:{},
				returnForm:{
					order_refund_id:'',
					expressNo:'',
					expressId:0,
				},
				range:[],
				isDisabled:false,
				btnText:'确认提交'
			};
		},
		onLoad(option) {
			this.orderRefundId = option.order_refund_id ? option.order_refund_id : '';
			this.getRefundDetail()
			this.getDeliveryCompany()
		},
		onPullDownRefresh() {
			this.refundDetail = {}
			this.getRefundDetail()
			uni.stopPullDownRefresh()
		},
		methods:{
			getRefundDetail(){
				const that = this;
				app.globalRequest({
					api: app.getApi().order.refundDetail,
					data: {
						order_refund_id: that.orderRefundId
					}
				}).then(res => {
					that.loadingPage = false;
					if (res.code == 0) {
						if(res.data.images){
							res.data.images = res.data.images.split('|')
						}else{
							res.data.images = []
						}
						// res.data.images = res.data.images.split('|')
						that.refundDetail = res.data;
						console.log('that.refundDetail',that.refundDetail)
					}
				})
			},
			concat() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '去联系客服',
					confirmColor: '#5DC751',
					success(res) {
						console.log('res', res)
						if (res.confirm) {
							that.getCustomer()
						}
					}
				})
			},
			getCustomer() {
				app.globalRequest({
					api: app.getApi().user.customer,
				}).then(res => {
					if (res.code == 0) {
						this.customer = res.data;
						/* uni.navigateTo({
							url:'/pages/user-page/concat/concat'
						}) */
						wx.openCustomerServiceChat({
							extInfo: {
								url: res.data.link_url
							},
							corpId: 'wwa5777f4dca0241d0', // 替换为你的企业ID
							success(res) {
								console.log('成功打开客服聊天界面');
							},
							fail(err) {
								console.log('打开客服聊天界面失败', err);
							}
						});
					}
				})
			},
			cancelRefund(){
				const that = this;
				uni.showModal({
					title: '提示',
					content: '确定取消退款申请？',
					confirmColor: '#5DC751',
					success(res) {
						if (res.confirm) {
							app.globalRequest({
								api: app.getApi().order.refundCancle,
								data:{
									order_refund_id:that.orderRefundId
								},
							}).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
									that.getRefundDetail()
								}else{
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						}
					}
				})
				
			},
			getDeliveryCompany(){
				const that = this;
				app.globalRequest({
					api: app.getApi().order.deliveryCompany,
					data:{
						keyword:''
					}
				}).then(res => {
					if (res.code == 0) {
						that.range = res.data
					}
				})
			},
			close(){
				this.showModal = false
			},
			returnGoodsModal(){
				this.showModal = true;
			},
			bindPickerChange(e){
				this.returnForm.expressId = e;
				console.log('picker发送选择改变，携带值为', e)
			},
			returnGoods(){
				const that = this;
				if(!that.returnForm.expressNo){
					uni.showToast({
						title:'请输入物流单号',
						icon:'none',
						mask:true,
					})
					return;
				}
				/* if(!that.returnForm.expressId){
					uni.showToast({
						title:'请选择物流公司',
						icon:'none',
						mask:true,
					})
					return;
				} */
				that.returnForm.order_refund_id = that.orderRefundId;
				that.isDisabled = true;
				that.btnText = '提交中,请稍候...';
				app.globalRequest({
					api: app.getApi().order.refundDelivery,
					method:'POST',
					data:that.returnForm,
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						this.isDisabled = false;
						this.btnText = '确认提交';
						this.showModal = false;
						this.getRefundDetail()
					}else{
						this.isDisabled = false;
						this.btnText = '确认提交';
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			copy(no){
				uni.setClipboardData({
					data: no,
					complete() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							mask: true
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		padding-bottom: 200rpx;
	}
	.after-sale-wrap {
		margin: 26rpx 24rpx 0;
		padding: 40rpx 24rpx 32rpx;
		background: linear-gradient(180deg, #FEFAF4 0%, #FFFFFF 100%);
		border-radius: 12rpx;
		position: relative;

		.right-icon {
			width: 120rpx;
			height: 131rpx;
			position: absolute;
			right: 0;
			top: 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.top-title {
			font-size: 40rpx;
			font-weight: bold;
		}

		.top-title2 {
			padding-bottom: 36rpx;
			// border-bottom: 2rpx solid #F6F6F6;
		}
	}

	.title-wrap {
		display: flex;
		justify-content: space-between;

		.title {
			font-weight: bold;
		}

		.time {
			color: #B3B0B0;
		}
	}

	.pending-wrap {
		position: relative;
		z-index: 2;

		.refund-money-wrap {
			padding: 0 20rpx;
			height: 144rpx;
			background: #F6F6F6;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title {
				color: #807E7E;
			}

			.title-2 {
				color: #B3B0B0;
			}

			.right-wrap {
				font-size: 36rpx;

				text {
					font-size: 28rpx;
				}
			}
		}

		.cancel-btn {
			width: 640rpx;
			height: 94rpx;
			border-radius: 48rpx;
			border: 2rpx solid #060201;
			font-size: 32rpx;
			margin-top: 60rpx;
		}

		.refund-reason-wrap {
			margin-top: 66rpx;
			padding-bottom: 26rpx;
			.title-wrap2{
				display: flex;
				align-items: center;
				.title{
					font-weight: bold;
				}
			}

			.reason-con {
				width: 100%;
				height: 144rpx;
				background: #F6F6F6;
				border-radius: 8rpx;
				margin-top: 16rpx;

				.text {
					color: #B3B0B0;
					padding: 20rpx;
				}
			}

			.reason-list {
				display: grid;
				grid-template-columns: repeat(3, 202rpx);
				margin-top: 20rpx;
				gap:24rpx;
				justify-content: space-between;
				.reason-img {
					width: 100%;
					height: 202rpx;
					border-radius: 8rpx;
					overflow: hidden;
				}
			}
		}
		.refund-reason-wrap2{
			margin-top:26rpx;
		}

		.refund-info-wrap {
			margin-top: 52rpx;

			.goods {
				margin-top: 16rpx;
			}

			.order {
				margin-top: 42rpx;
			}
		}
		.refund-info-wrap2{
			margin-top:26rpx;
		}

		.address-wrap {
			padding: 26rpx 0;
			border-bottom: 2rpx solid #F6F6F6;

			.user-info-wrap {
				padding: 16rpx 0;
			}
		}
		.delivery-wrap{
			margin:18rpx 0 24rpx;
			.wuliu-info{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top:14rpx;
				.wuliu-info-left{
					text{
						padding-left:18rpx;
						color:#AFB0B2;
						font-size: 26rpx;
					}
				}
				.copy{
					color:#44C082;
				}
			}
		}
	}

	.footer {
		width: 100%;
		height: 120rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		z-index: 2;
		border-top: 2rpx solid #F6F6F6;

		.footer-btn {
			margin:0 55rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			
			.btn {
				width: 640rpx;
				height: 94rpx;
				border: 2rpx solid #52B148;
				border-radius: 48rpx;
				font-size: 32rpx;
				color: #52B148;
				box-sizing: border-box;
			}
			.btn-short{
				width: 220rpx;
				height: 88rpx;
				border-radius: 44rpx;
				box-sizing: border-box;
				margin-left:24rpx;
				margin-right: 0;
				font-size: 32rpx;
			}
			.conact{
				border:2rpx solid #AFB0B2;
			}
			.cancel{
				border: 2rpx solid #52B148;
				color:#52B148;
			}
		}
	}
	.modal{
		width: 100%;
		height: 100%;
		background: rgba(6,2,1,0.4);
		position: fixed;
		left:0;
		top:0;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		visibility: hidden;
		transition: all 0.1s ease-in-out;
		z-index:223;
	}
	.modal-show {
		opacity: 1;
		visibility: visible;
	}
	
	.wuliu-wrap{
		width: 702rpx;
		height: 524rpx;
		position: relative;
		transition: all 0.1s ease-in-out;
		image{
			width: 100%;
			height: 100%;
		}
		.wuliu-con{
			width: 100%;
			height: 100%;
			position: absolute;
			left:0;
			top:0;
			padding:0 32rpx;
			box-sizing: border-box;
			.title{
				font-weight: bold;
				font-size: 36rpx;
				color: #BF9C6A;
				line-height: 48rpx;
				text-align: center;
				padding-top:24rpx;
				padding-bottom: 64rpx;
			}
			.form{
				.form-item{
					width: 100%;
					height: 94rpx;
					border:2rpx solid #BFBFBF;
					border-radius: 47rpx;
					margin-bottom: 24rpx;
					padding:0 30rpx;
					box-sizing: border-box;
					input{
						width: 100%;
						height: 100%;
						font-size: 28rpx;
					}
				}
			}
		}
		.btn{
			width: 100%;
			height: 94rpx;
			background: #FFEFD1;
			border-radius: 47rpx;
			margin:40rpx auto 0;
			color:#BF9E69;
			font-size: 32rpx;
		}
		.close{
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right:30rpx;
			top:16rpx;
		}
	}
	.ml{
		padding-left:28rpx;
	}
</style>